<template>
	<div class="container">
		<div class="bgHeader">
            <!--  <div class="logintitle"><img src="../../imgs/login/logoH.png"></div>-->
            <div class="logintitle" style="color:#000;font-weight:600;font-size:26px;">
                <!-- <img style="margin-top: -3px;vertical-align: middle;margin-right:10px;height:43px;" src="../../imgs/index/home-title-logo-img.png"> -->
                <!-- 影院总部管理系统 -->
                <!-- <img src="../../imgs/index/home-left-logo-img1.png">
                <span style="font-style:italic;color:#94C6F6">总部</span>
                <span style="font-style:italic;color:#8FCD4E;margin-left:-3px;">系统</span> -->

            </div>
        </div>
        <div class="bgBody">
                <img src="../../imgs/login1.png" alt="" class="img_login">
            <div class="gbContent" style=" position: absolute;left:50%">
                <div class="logintitle" style="color:#000;font-weight:600;font-size:26px;">
                    <!-- <img style="margin-top: -3px;vertical-align: middle;margin-right:10px;height:43px;" src="../../imgs/index/home-title-logo-img.png"> -->
                    <!-- 影院总部管理系统 -->
                    <img src="../../imgs/index/home-left-logo-img1.png">
                    <span style="font-style:italic;color:#94C6F6;font-size: 18px;">总部</span>
                    <span style="font-style:italic;color:#8FCD4E;margin-left:-3px;font-size: 18px;">系统</span>

                </div>
                <div class="loginForm" >           
                    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="80">
                    <!-- <p>管理员登录</p><br/> -->
                <el-form-item :show-message="false" prop="account" ref="account">
                        <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')">
                            <template slot="prepend"><i class="userIcon"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item :show-message="false" prop="password" ref="password">
                        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入用密码" @keyup.enter.native="submitForm('loginForm')">
                            <template slot="prepend"><i class="lockIcon"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item :show-message="false" prop="yzm" ref="yzm">
                        <el-input type="text" v-model="loginForm.yzm" auto-complete="off" placeholder="验证码" @keyup.enter.native="submitForm('loginForm')">
                            <template slot="prepend"><i class="barcodeIcon"></i></template>
                                <template slot="append" >
                                    <div @click="getCaptcha">
                                        <img :src="urs" width="100" height="40" id="getCaptcha">
                                    </div> 
                                </template>
                        </el-input>
                    </el-form-item>                        
                    <el-form-item :show-message="false" class="loginArea">
                        <el-button class="btn" style="width:100%;" :loading="loading" @click="submitForm('loginForm')">登 录</el-button>
                        <!-- <el-button class="btn rt" style="width:48%;" :loading="loading" @click="CALogin()">CA登 录</el-button> -->
                    </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="copyrightView">版权所有 ©️ </div>
        </div>
	</div>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './Login.service';
    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';

    @Component
    export default class login extends Vue{
        loginForm: any=[];
        rules: any={};
        CAForm: any={};
        LoginFormDialog: any={};
        dialogVisible:boolean = false;
        key:any;
        CALoginVisible:boolean = false;
        LoginVisible:boolean = false;
        loading:boolean =  false;
        // urs: string = '';
        urs: string =  window.process.config.API_BASEURL + '/captcha';
        constructor(){
            super();
            this.loginForm = {
               account:'',
               password:'',
               yzm:''
            };
            this.LoginFormDialog = {
                name:'',
                area:'',
                telUser:'',
                tel:'',
                userType:'',
                weixin:''
            };
            this.CAForm = {
                password:''
            }
            this.rules= {
                account: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },                  
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                yzm: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            }         
        };
        getCaptcha(){
            // Service.captcha({}).then((res) =>{
            //     this.urs = this.getObjectURL(res);                    
            // })
            let strs =this.urs;
            //console.log(strs.indexOf('?'))
            strs=strs.substring(0,strs.indexOf('?'))
            if(strs === ''){
                strs = this.urs
            }
            let timestamp = (new Date()).valueOf();
            this.urs = strs + '?' + timestamp
        }; 
        // 转化文件流
        getObjectURL(file) {
            let url = null;
            if (window['createObjectURL'] != undefined) { // basic
                url = window['createObjectURL'](file);
            } else if (window['webkitURL'] != undefined) { // webkit or chrome
                url = window['webkitURL']['createObjectURL'](file);
            } else if (window['URL'] != undefined) { // mozilla(firefox)
                url = window['URL']['createObjectURL'](file);
            } else if('msSaveOrOpenBlob' in navigator){
                url = window.navigator.msSaveOrOpenBlob(file);
          }
            return url;
        };
        CALogin(){
            this.CALoginVisible = true;
        }
        getKey(){           
                // Service.getKey({}).then((res) =>{                
                //         if(res.data.succeeded){
                //             this.key=res.data.data
                //             window.sessionStorage.setItem('loginkey',this.key);    
                //         }else{                         
                //             this['$message']({
                //                 message: res.data.errorMessage,
                //                 type: 'error'
                //             });
                //         }                    
                // })
        };
        LoginsubmitForm(formName){
            let self = this;
            self['$refs'][formName]['validate']((valid)=>{
                if (valid) {  
                    
                } else {
                    return false;
                }
            });
        }
        guestLogin(){
            this.LoginVisible = true;
            //  Service.guestLogin({}).then((res) =>{                
            //     if(res.data.succeeded){
            //         window.sessionStorage.setItem('token',res.data.data.token);
            //         window.sessionStorage.setItem('LogonUserName',res.data.data.user.fullName);
            //         window.sessionStorage.setItem('archiveAgentCode',res.data.data.user.archiveAgentCode);
            //         window.sessionStorage.setItem('LogonUserRoleIds',res.data.data.user.roleIds);
            //         window.sessionStorage.setItem('LogonUserId',res.data.data.user.userId);
            //         window.sessionStorage.setItem('userType',res.data.data.user.userType);
            //         //console.log(window.sessionStorage);
            //         this.$router.options.routes[0].meta.requireAuth= false; 
            //         this.$router.push({
            //                 path:'/home/mainrouter',
            //                 name:'mainrouter'
            //         });           
            //     }else{               
            //             this['$message']({
            //                 message: res.errorMessage,
            //                 type: 'error'
            //             });                        
            //     }
            // });
        };
        // CA登录
        CAsubmitForm(formName) {
            let self = this;
            self['$refs'][formName]['validate']((valid)=>{
                if (valid) {  
                    
                } else {
                    return false;
                }
            });
        }
        submitForm(formName) { 
            let self = this;
            // this.$router.push({
            //             path:'/home/home',
            //             name:'首页'
            //         });

            this.$refs[formName].validate((valid) => {
                // debugger;
                // //console.log(valid,formName)
                if (valid) {
                    // this.$router.push({
                    //     path:'/home/home',
                    //     name:'首页'
                    // });
                    self.loading = true;   
                    let encrypt = new JSEncrypt();
                    encrypt.setPublicKey(this.key);
                    let pass = encrypt.encrypt(this.loginForm.password); 
                    let params={
                            userName:this.loginForm.account,
                            password:this.loginForm.password,
                            captcha:this.loginForm.yzm
                    };

                    localStorage.clear();
                    sessionStorage.clear();

                    Service.login(params).then((res) =>{    
                        //console.log(res)                        
                        if(typeof(res)!="object"){
                            res=JSON.parse(res)
                        } 
                        if(res.succeeded){
                            let clientId = base['base64'].encode(res.data.user.loginName);
//                            window.sessionStorage.setItem('token',res.data.token);
//                            window.sessionStorage.setItem('LogonUserName',res.data.user.fullName);
//                            window.sessionStorage.setItem('archiveAgentCode',res.data.user.archiveAgentCode);
//                            window.sessionStorage.setItem('archiveAgentName',res.data.user.archiveAgentName);
//                            window.sessionStorage.setItem('LogonUserRoleIds',res.data.user.roleIds);
//                            window.sessionStorage.setItem('LogonUserId',res.data.user.userId);
//                            window.sessionStorage.setItem('userType',res.data.user.userType);
//                            window.sessionStorage.setItem('department',res.data.user.department);
//                            window.sessionStorage.setItem('orgId',res.data.user.orgId);
//                            window.sessionStorage.setItem('fondId',res.data.user.fondId);
//                            window.sessionStorage.setItem('fondName',res.data.user.fondName);
//                            window.sessionStorage.setItem('LogonFondCode',res.data.user.fondCode);
//                            window.sessionStorage.setItem('clientId',clientId);
//                            window.sessionStorage.setItem('loadMenu','true');

                            localStorage.setItem('token',res.data.token);
                            localStorage.setItem('LogonUserName',res.data.user.username);
                            sessionStorage.setItem('authorities',JSON.stringify(res.data.user.authorities));

                            localStorage.setItem('archiveAgentCode',res.data.user.archiveAgentCode);
                            localStorage.setItem('archiveAgentName',res.data.user.archiveAgentName);
                            localStorage.setItem('LogonUserRoleIds',res.data.user.roleIds);
                            localStorage.setItem('LogonUserId',res.data.user.userId);
                            localStorage.setItem('userType',res.data.user.userType);
                            localStorage.setItem('department',res.data.user.department);
                            localStorage.setItem('orgId',res.data.user.orgId);
                            localStorage.setItem('fondId',res.data.user.fondId);
                            localStorage.setItem('fondName',res.data.user.fondName);
                            localStorage.setItem('LogonFondCode',res.data.user.fondCode);
                            localStorage.setItem('clientId',clientId);
                            window.sessionStorage.setItem('loadMenu','true');

//                            localStorage.setItem('requireAuth','false');
//                            localStorage.setItem('token',res.data.token);

                            this.$router.options.routes[0].meta.requireAuth= false;
                            this.$router.push({
                                path:'/views/home/home',
                                name:'首页'
                            });  
                        }else{     
                                this.getCaptcha()              
                                this['$message']({
                                    message: res.errorMessage,
                                    type: 'error'
                                });                        
                        }
                        self.loading = false;
                    });
                    
                } else {
                    return false;
                }
            });
       
        };  
         
        created(){  
            // 获取加密公钥
            this.getKey();
            // 获取验证码
            // this.getCaptcha();
        };
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss'; 
    .img_login{
            position: absolute;
    bottom: 263px;
    z-index: 9;
    left: 32%;
    height: 350px;
    width: 350px;
    }
   @media only screen and (max-width: 1280px) {
       .img_login{
            position: absolute;
    bottom: 150px;
    z-index: 9;
    // left: 36%;
    height: 250px;
    width: 250px;
    }
     .bgBody .gbContent[data-v-2529d779] {
            position: relative;
            background: #F6F6FC;
            width: 371px;
            height: 100%;
            margin: auto;
            bottom: 10.2rem;
            z-index: 99999;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 1px 1px 5px #52b7f5;
        }
        .bgBody .gbContent .logintitle[data-v-2529d779] {
            position: absolute;
            top: 6px;
            font-size: 0.5em;
            color: #fff;
            font-weight: 600;
            left: 50%;
            margin-left: -132px;
            span {
                font-size: 1rem !important;
            }
        }
        .bgBody .loginForm /deep/ .el-form-item {
            margin-bottom: 0.7rem !important;
        }
        .bgBody .loginForm {
            top: 4rem;
        }
        // /deep/ .el-input__inner,.bgBody .el-input-group__append img,/deep/.el-form-item__content {
        //     height: 25px !important;
        //     line-height: 25px !important;
        // }
        .bgBody .loginForm .el-input-group__prepend .userIcon,.bgBody .loginForm .el-input-group__prepend .lockIcon,.bgBody .loginForm .el-input-group__prepend .barcodeIcon {
            height: 16px;
        }
        .bgBody .loginForm .btn {
            font-size: 12px;
        }
        /deep/ .el-button {
            padding: 8px 20px !important;
        }
        .bgBody {
            height: 46% !important;
        }
        
   }
</style>